<template>
  <div class="tabbar">
    <ul>
      <li
        v-for="(item, index) in routerList"
        :key="index"
        @click="changeTab(item.path)"
      >
        <img :src="$route.path == item.path ? item.selected : item.active" />
        <span :class="$route.path == item.path ? 'selected' : ''">{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Tabbar",
  data() {
    return {
      routerList: [
        {
          title: "首页",
          path: "/home",
          active: "./images/home.png",
          selected: "./images/home-select.png",
        },
        {
          title: "列表",
          path: "/list",
          active: "./images/list.png",
          selected: "./images/list-select.png",
        },
        {
          title: "购物车",
          path: "/cart",
          active: "./images/cart.png",
          selected: "./images/cart-select.png",
        },
        {
          title: "我的",
          path: "/my",
          active: "./images/my.png",
          selected: "./images/my-select.png",
        },
      ],
    };
  },
  methods: {
    changeTab(path) {
      // 判断点击的是否为同一个路由 
      //或者重写replace方法，在router文件里
      if (this.$route.path == path) return; 
      this.$router.replace(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.6rem;
  z-index: 999;
  background-color: #fff;

  ul {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  img {
    width: 0.8267rem;
    height: 0.8267rem;
  }
  span {
    font-size: 0.4267rem;
  }
  .selected{
    color: red;
  }
}
</style>